<!--双柱形-->
<template>
    <div class="chart-double-line" :style="'height:' + (config.height || '310px;')">
		  <chart :options="doubleLine" ref="doubleline" auto-resize/>
    </div>
</template>

<script>
import '@/util/utils'
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/line";
import 'zrender/lib/svg/svg';
let echarts1 = require("echarts/lib/echarts");
export default {
    name: "chart-double-ine",
    components: {
        chart: Echarts
    },
    props: {
        config:{
            type:Object,
            default:()=>{}
        },
        doubleLineData: {
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            doubleLine: {
                tooltip: {
                    show: false
                },
                grid: {
                    left: '2%',
                    right: '3%',
                    top: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    show: ("showLegent" in this.config && this.config.showLegent) ? true : false, 
                    right:"20px",
                    itemWidth:6,
                    itemHeight: 6,
                    data: this.config.seriyName
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {//x轴线的样式
                            lineStyle: {
                                type: 'solid',
                                color: '#EFF0F6',//线的颜色
                                width:'1'//坐标线的宽度
                            }
                        },
                        axisLabel:{//y字体样式
                            show: true,
                            textStyle: {
                                color:'#9B9B9B',
                                fontWeight: 300 ,
                                fontSize : 12 //文字的字体大小
                            }
                        },
                        axisTick : { //取消刻度线
                            show : false
                        },
                        axisPointer: {
                            type: "none"
                        },
                        splitLine: {
                            show: false
                        },
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLine: {//y轴线的样式
                            lineStyle: {
                                width:'0'//坐标线的宽度
                            }
                        },
                        axisLabel:{//x字体样式
                            show: true,
                            textStyle: {
                                color:'#9B9B9B',
                                fontWeight: 300 ,
                                fontSize: 12 //文字的字体大小
                            }
                        },
                        axisTick: { //取消刻度线
                            show: false
                        },
                        splitNumber: 5,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#EFF0F6",
                                type: 'solid',
                                width:'1'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: this.config.seriyName[0],
                        type: 'bar',
                        barWidth: '6px',
                        itemStyle: {
                            normal: {
                                color: new echarts1.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0, color: this.config.colors[0][0]
                                }, {
                                    offset: 1, color:  this.config.colors[0][1]
                                }], false),
                                barBorderRadius:[3,3,0,0]
                            }
                        },
                        data: []
                    },
                    {
                        name: this.config.seriyName[1],
                        type: 'bar',
                        barWidth: '6px',
                        itemStyle: {
                            normal: {
                                color: new echarts1.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0, color: this.config.colors[1][0]
                                }, {
                                    offset: 1, color:  this.config.colors[1][1]
                                }], false),
                                barBorderRadius:[3,3,0,0]
                            }
                        },
                        data: [],
                    }
                ]
            }   
        };
    },
    created() {

    },
    mounted() {
        this.$nextTick(() => {
            this.init()
        })
    },
    methods: {
        init(){
            this.setLine()
        },  
        setLine(){
            let self = this
            this.$refs.doubleline.clear()
            this.$nextTick(()=>{
                if("tooltip" in this.config){
                    this.doubleLine.tooltip = this.config.tooltip;
                }
                this.doubleLine.xAxis[0].data = [];
                this.doubleLine.series[0].data = [];
                this.doubleLine.series[1].data = [];
                if(this.doubleLineData.length){
                  for(let i=0;i<this.doubleLineData.length;i++){
                    let _doubleline = this.doubleLineData[i];
                    this.doubleLine.xAxis[0].data.push(_doubleline.x || '-');
                    this.doubleLine.series[0].data.push(_doubleline.value1 || 0);
                    this.doubleLine.series[1].data.push(_doubleline.value2 || 0);
                  }
                }
            })
        },
    },
    watch: {
        doubleLineData(newVal){
            if(newVal){
                this.setLine()
            }
        }
    }
};
</script>

<style lang="scss">
.chart-double-line {
  min-height: 310px;
  width: 100%;
  margin: 0;
  .echarts {
    width: 100%;
    height: 100%;
  }
  .bold {
    font-weight: bold;
    line-height: 18px;
  }
}
</style>
